import React, { Component, useRef, useState } from "react"
import PubSub from "pubsub-js"
import { Input } from "antd"

// export default class AddInput extends Component {
//   addItem = (e) => {
//     if (e.keyCode === 13) {
//       let {
//         input: { value: message },
//       } = this
//       PubSub.publish("mypublish", message)
//     }
//   }
//   render() {
//     return (
//       <div>
//         <input
//           type="text"
//           ref={(e) => (this.input = e)}
//           onKeyUp={(e) => this.addItem(e)}
//         />
//       </div>
//     )
//   }
// }

export default function AddInput() {
  const [input, setInput] = useState("")
  function change(e) {
    setInput(e.target.value)
  }
  function addItem(e) {
    console.log(inputRef.current)
    if (e.keyCode === 13) {
      PubSub.publish("mypublish", input)
    }
  }
  const inputRef = useRef(null)

  return (
    <>
      <Input
        ref={inputRef}
        onChange={change}
        type="text"
        value={input}
        onKeyUp={addItem}
      />
    </>
  )
}
